<template>
    <div class="bubble_box">
        <div class="businessSourceBox">
            <div class="itemHeader">
                <span class="titelText">商机源展示</span>
            </div>
            <img class="topbgImg" src="../assets/newDataOcean/topBg.png" alt="">
            <div class="bottomBox">
                <div v-for="(item, index) in sourseList" :key="index" class="sourseList">
                    <img :src="item.url" alt="">
                    <div class="ml5">{{ item.name }}</div>
                </div>
            </div>
            <div class="dataSea_middle_bottom">
                <ul style="padding-left:20px;">
                    <li v-for="(item, index) in keyBusiness" :key="index" class="pops animal">
                        <p class="fb">{{ item.businessName }}</p>
                        <p>{{ item.invokeNum }}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="pops_right">
            <div class="popsTow">
                <div class="pop" v-for="(item, index) in word" :key="index">
                    {{ item }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>

const _ = require('lodash');
export default {
    data() {
        return {
            keyBusiness: [
                {
                    "businessName": "5G换机",
                    "invokeNum": 34019
                },
                {
                    "businessName": "主套餐续约",
                    "invokeNum": 25758
                },
                {
                    "businessName": "云游戏",
                    "invokeNum": 503
                },
                {
                    "businessName": "云看护",
                    "invokeNum": 30829
                },
                {
                    "businessName": "出行需求",
                    "invokeNum": 5696
                },
                {
                    "businessName": "加AI安全",
                    "invokeNum": 59433
                },
                {
                    "businessName": "加ITV(第一部)",
                    "invokeNum": 245096
                },
                {
                    "businessName": "加ITV(第二部)",
                    "invokeNum": 34535
                },
                {
                    "businessName": "加云电脑",
                    "invokeNum": 14194
                },
                {
                    "businessName": "加云盘小合约",
                    "invokeNum": 11553
                },
                {
                    "businessName": "加优品包",
                    "invokeNum": 7460
                },
                {
                    "businessName": "加副卡",
                    "invokeNum": 711636
                },
                {
                    "businessName": "加固话",
                    "invokeNum": 2
                },
                {
                    "businessName": "加天翼看家",
                    "invokeNum": 110907
                },
                {
                    "businessName": "加流量包",
                    "invokeNum": 1559123
                },
                {
                    "businessName": "加短信包",
                    "invokeNum": 1035
                },

            ],
            sourseList: [
                {
                    name: '万号',
                    url: require('../assets/newDataOcean/sourse1.png')
                }, {
                    name: '装维',
                    url: require('../assets/newDataOcean/sourse2.png')
                }, {
                    name: 'IM客服',
                    url: require('../assets/newDataOcean/sourse3.png')
                }, {
                    name: '外呼',
                    url: require('../assets/newDataOcean/sourse4.png')
                }, {
                    name: '企微',
                    url: require('../assets/newDataOcean/sourse5.png')
                },
            ],
            timers: [],
            endIndex: 0,
            word: [
                "套餐低签",
                "天翼看家",
                "携号转出",
                "移机搬家",
                "智能门禁",
                "智能门锁",
            ],
        }
    },
    watch: {},
    activated() { },
    created() {
        this.getKeyBusiness();
    },
    methods: {
        //商机源 - 获取数据
        getKeyBusiness() {
            // let data = {}
            // data.pageNum = this.soursePageNum, //页号
            //     data.pageSize = 100 //页大小
            // data.province = this.selectProvince
            // this.clearAllTimer();
            // newDataSeaHttp.businessSource(data).then((res) => {
            //     console.log("重点商机的", res);
            //     if (res.data.code == 200) {
            //         this.endIndex = 0;
            //         this.keyBusiness = [...this.keyBusiness, ...res.data.data.list]
            //         this.totalPageNum = res.data.data.pages
            //         this.$nextTick(() => {
            //             this.setAnimation();
            //         });
            //     } else {
            //         this.$message(res.data.msg)
            //     }
            // })
            this.endIndex = 0;
            this.keyBusiness = this.keyBusiness;
            this.$nextTick(() => {
                this.setAnimation();
            });
        },
        setAnimation() {
            let lis = document.getElementsByClassName("pops");
            //   console.log("li的长度是", lis);
            for (let i = 0; i < lis.length; i++) {
                const el = lis[i];
                // el.style.animationDelay = Math.floor((i + 1) / 6) * 8 + "s";//8s每次放6个
                // 动画延迟时间  每次放多少个 * 大概延迟多少秒
                el.style.animationDelay =
                    Math.floor((i + 1) / 1) * 1 + "s"; //4-6s每次放7个
                //TODO left是5-95之间的随机数
                el.style.left = this.getRandomNumber(1, 75) + "%";
                //TODO 动画总时间是8-12之间的随机数
                // el.style.animationDuration = this.getRandomNumber(5, 7) + "s";
                el.style.animationDuration = "5s";
                // 第二种方法
                this.endOrStart(el, lis.length, i);
            }
        },
        // 第二种结束
        endOrStart(el, lengths, index) {
            const style = getComputedStyle(el);
            const animationDuration = parseFloat(style.animationDuration);
            const animationDelay = parseFloat(style.animationDelay);
            // const seconds = (animationDuration + animationDelay) * 1000;
            const seconds = (animationDuration + animationDelay) * 1000;
            //   console.log("第" + index + "个", animationDuration, animationDelay);
            let _this = this;
            let timer = setTimeout(function () {
                // console.log(
                //   "CSS animation has completed!",
                //   lengths,
                //   index,
                //   _this.endIndex
                // );
                el.classList.remove("animal");
                _this.endIndex += 1;
                if (lengths == _this.endIndex) {
                    _this.endIndex = 0;
                    //  _this.getKeyBusiness();
                    //  _this.soursePageNum = Number(_this.soursePageNum)+1
                    //  if (_this.soursePageNum > _this.totalPageNum) {
                    //     _this.soursePageNum = 1
                    //  }
                    let keyBusiness = _.cloneDeep(_this.keyBusiness);
                    console.log("keyBusiness===", keyBusiness);

                    _this.keyBusiness = [];
                    setTimeout(() => {
                        _this.keyBusiness = keyBusiness;
                        _this.$nextTick(() => {
                            console.log('第二轮');
                            _this.clearAllTimer();
                            _this.setAnimation();
                        });
                    }, 100);
                }
            }, seconds);
            _this.timers.push(timer);
        },
        // 清除所有定时器
        clearAllTimer() {
            for (let i = 0; i < this.timers.length; i++) {
                clearTimeout(this.timers[i]);
                this.timers[i] = null;
            }
            this.timer = [];
        },
        // 随机数
        getRandomNumber(a, b) {
            return Math.floor(Math.random() * (b - a + 1)) + a;
        },
    },
    mounted() { }
}
</script>

<style lang='scss' scoped>
.bubble_box {
    width: 100%;
    height: 100vh;
    display: flex;
    // border: 1px solid red;
}

.businessSourceBox {
    height: 58%;
    width: 45%;
    // margin-top: 2%;
    background: linear-gradient(0deg, rgba(191, 237, 255, 0.32) 0%, rgba(255, 255, 255, 0.95) 100%);
    box-shadow: 0px 5px 6px 0px rgba(26, 40, 65, 0.09);
    border-radius: 6px;
    border: 2px solid #fff;
    position: relative;
}

.itemHeader {
    width: 95%;
    height: 12px;
    margin: 0 auto;
    margin-top: 1.4375rem;
    color: #000;
    font-size: .9375rem;
    /* padding-left: 1.875rem; */
    background: url('../assets/newDataOcean/itemHeader.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.titelText {
    position: absolute;
    top: -0.3125rem;
    left: 1.25rem;
}

.topbgImg {
    width: 100%;
    height: 13%;
    position: absolute;
    left: 0;
    top: -2%;
}

.bottomBox {
    width: 100%;
    height: 13%;
    background: url('../assets/newDataOcean/bottomBg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: -2%;
    left: 0;
}

.sourseList {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-top: 5px;
}

.sourseList img {
    width: 25px;
    height: 25px;
}

.dataSea_middle_bottom {
    width: 100%;
    height: 90%;
}

@keyframes mymove {
    0% {
        opacity: 1;
        bottom: 0rem;
        transform: scale(0.2);
    }

    100% {
        opacity: 0.9;
        /* bottom: 35rem; */
        /* bottom: 20rem; */
        bottom: 80%;
        transform: scale(1);
    }
}

ul {
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 0;
}

li {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    width: 5rem;
    height: 5rem;

    background-size: cover;
    text-align: center;
    cursor: pointer;
}

p {
    width: 5rem;
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: .75rem;
}

.animal {
    animation: mymove;
}

li:nth-child(2n) {
    background-image: url("~@/assets/newDataOcean/bluePop.png");
    color: #0072FF;
}

li:nth-child(2n + 1) {
    background-image: url("~@/assets/newDataOcean/greenPop.png");
    color: #00A63C;
}

li:nth-child(odd) {
    animation-delay: calc(1s * (1 - 1) / 2);
}

li:nth-child(even) {
    animation-delay: calc(1s * (2 - 1) / 2);
}

.fb {
    font-weight: bold;
}


// 右边的气泡
// 动画
@keyframes mymoveTwo {
  0% {
    opacity: 1;
    bottom: -2rem;
    transform: scale(0.2);
  }
  100% {
    opacity: 0.9;
    bottom: 22rem;
    transform: scale(1.2);
  }
}
.pops_right {
    height: 58%;
    width: 45%;
    border: 1px solid red;
    position: relative;
    background-color: #101E45;

    .popsTow {
        position: absolute;
        // top: 10%;
        top: 0%;
        left: 0;
        height: 100%;
        width: 100%;
        //   background-color: #fff;
        color: #fff;
        overflow: hidden;
        font-size: 1.5rem;

        .pop {
            opacity: 0;
            width: 7rem;
            height: 7rem;
            line-height: 7rem;
            background: url("@/assets/u128.png") no-repeat;
            background-size: cover;
            text-align: center;
            cursor: pointer;
        }

        .pop:hover {
            animation-play-state: paused;
        }

        .pop:active {
            animation-play-state: paused;
        }

        .pop:nth-child(1) {
            position: absolute;
            left: 10%;
            animation: mymoveTwo 7s cubic-bezier(1, 0.55, 0.85, 1.29) 0s infinite;
        }

        .pop:nth-child(2) {
            position: absolute;
            left: 60%;
            animation: mymoveTwo 10s cubic-bezier(0.075, 0.42, 0.85, 1.3) 1s infinite;
        }

        .pop:nth-child(3) {
            position: absolute;
            left: 30%;
            animation: mymoveTwo 8s ease 2s infinite;
        }

        .pop:nth-child(4) {
            position: absolute;
            left: 35%;
            animation: mymoveTwo 10s linear 3s infinite;
        }

        .pop:nth-child(5) {
            position: absolute;
            left: 15%;
            animation: mymoveTwo 10s cubic-bezier(1, 0.42, 0.85, 1.3) 4s infinite;
        }

        .pop:nth-child(6) {
            position: absolute;
            left: 66%;
            animation: mymoveTwo 11s ease-in-out 5s infinite;
        }

        .pop:nth-child(7) {
            position: absolute;
            left: 58%;
            animation: mymoveTwo 10s linear 6s infinite;
        }

        .pop:nth-child(8) {
            position: absolute;
            left: 73%;
            animation: mymoveTwo 10s cubic-bezier(0.075, 0.22, 0.65, 1) -6s infinite;
        }
    }
}
</style>